
<template>
<!-- 
  https://ext.dcloud.net.cn/plugin?id=6265 插件地址
 -->
  <view
    :class="{ pickerMask: visable }"
    @click="maskClick"
    @touchmove.stop.prevent="returnHandle"
  >
    <view class="picker-box" :class="{ 'picker-show': visable }">
      <view
        class="operate-box"
        @touchmove.stop.prevent="returnHandle"
        @tap.stop="returnHandle"
      >
        <view class="time-box">
          <view
            @click="touchSelect(0)"
            class="time-item"
            :style="{ color: touchIndex ? '#000000' : themeColor }"
          >
            <text>{{ startText }}</text>
            <text>{{ resultDate[0] }}</text>
          </view>
          <text>至</text>
          <view
            @click="touchSelect(1)"
            class="time-item"
            :style="{ color: touchIndex ? themeColor : '#000000' }"
          >
            <text>{{ endText }}</text>
            <text>{{ resultDate[1] }}</text>
          </view>
        </view>
        <view :style="{ color: themeColor }" @click="pickerConfirm">确定</view>
      </view>
      <picker-view
        :value="pickerValue"
        @change="pickerChange"
        class="picker-view"
        :indicator-style="indicatorStyle"
        @tap.stop="returnHandle"
      >
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in years" :key="index"
            >{{ item }}年</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="picker-item" v-for="(item, index) in months" :key="index"
            >{{ item }}月</view
          >
        </picker-view-column>
        <picker-view-column v-if="days.length > 0">
          <view class="picker-item" v-for="(item, index) in days" :key="index"
            >{{ item }}日</view
          >
        </picker-view-column>
      </picker-view>
    </view>
  </view>
</template>
<script>
export default {
  name: "termPicker",
  props: {
    visable: {
      type: Boolean,
      default: false,
    },
    defaultDate: {
      type: Array,
      default: () => [],
    },
    minYear: {
      type: Number,
      default: 1990,
    },
    timeLimit: {
      type: Boolean,
      default: false,
    },
    deferYear: {
      type: Number,
      default: 0,
    },
    themeColor: {
      type: String,
      default: "#10BE9D",
    },
    startText: {
      type: String,
      default: "开始时间",
    },
    endText: {
      type: String,
      default: "结束时间",
    },
  },
  data() {
    const date = new Date();
    const years = [];
    const year = date.getFullYear();
    const months = [];
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const maxYear = this.timeLimit ? year : year + this.deferYear;
    for (let i = this.minYear; i <= maxYear; i++) {
      years.push(i);
    }
    for (let i = 1; i <= 12; i++) {
      months.push(i);
    }
    return {
      indicatorStyle: "height: 100rpx;",
      touchIndex: 0,
      year,
      month,
      day,
      years,
      months,
      days: [],
      pickerValue: [],
      resultDate: [],
    };
  },
  mounted() {
    this.setDate();
  },
  methods: {
    returnHandle() {},
    setDate() {
      if (this.defaultDate.length > 0) {
        let date = this.defaultDate[0];
        this.resultDate = this.defaultDate;
        this.setPicker(date);
      } else {
        let month = this.month < 10 ? "0" + this.month : this.month;
        let day = this.day < 10 ? "0" + this.day : this.day;
        let nowTime = this.year + "-" + month + "-" + day;
        this.resultDate = [nowTime, nowTime];
        this.setPicker(nowTime);
      }
    },
    setPicker(date) {
      const splitVal = date.split("-");
      let year = this.years.indexOf(Number(splitVal[0]));
      let month = Number(splitVal[1]) - 1;
      let day = Number(splitVal[2]) - 1;
      this.pickerChange({
        detail: {
          value: [year, month, day],
        },
      });
    },
    touchSelect(val) {
      let date = this.resultDate[val];
      this.touchIndex = val;
      this.setPicker(date);
    },
    getDateTime(date) {
      let year = this.years[date[0]];
      let month = this.months[date[1]];
      let day = this.days[date[2]];
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.resultDate[this.touchIndex] = year + "-" + month + "-" + day;
    },
    pickerChange(e) {
      const currents = e.detail.value;
      if (currents[1] + 1 === 2) {
        this.days = [];
        if (
          ((currents[0] + this.minYear) % 4 === 0 &&
            (currents[0] + this.minYear) % 100 !== 0) ||
          (currents[0] + this.minYear) % 400 === 0
        ) {
          for (let i = 1; i < 30; i++) {
            this.days.push(i);
          }
        } else {
          for (let i = 1; i < 29; i++) {
            this.days.push(i);
          }
        }
      } else if ([4, 6, 9, 11].some((item) => currents[1] + 1 === item)) {
        this.days = [];
        for (let i = 1; i < 31; i++) {
          this.days.push(i);
        }
      } else if (
        [1, 3, 5, 7, 8, 10, 12].some((item) => currents[1] + 1 === item)
      ) {
        this.days = [];
        for (let i = 1; i < 32; i++) {
          this.days.push(i);
        }
      }
      this.pickerValue = currents;
      this.getDateTime(currents);
    },
    maskClick() {
      this.$emit("update:visable", false);
    },
    pickerConfirm() {
      const { resultDate, timeLimit } = this;
      let startTime = new Date(resultDate[0]).getTime();
      let endTime = new Date(resultDate[1]).getTime();
      let nowTime = timeLimit ? new Date().getTime() : endTime;
      if (startTime <= endTime && endTime <= nowTime) {
        this.$emit("confirm", resultDate);
        this.maskClick();
      } else {
        uni.showToast({
          title: "时间范围不正确！",
          icon: "none",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.pickerMask {
  position: fixed;
  z-index: 998;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}
.picker-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease;
  transform: translateY(100%);
  z-index: 998;
  .operate-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18rpx 30rpx;
    background-color: #ffffff;
    text-align: center;
    font-size: 30rpx;
    border-bottom: 2rpx solid #e5e5e5;
    .time-box {
      width: 60%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .time-item {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
.picker-show {
  transform: translateY(0);
}
.picker-view {
  width: 750rpx;
  height: 600rpx;
  background-color: #ffffff;
  .picker-item {
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
</style>